<template>
    <div class="Aside">
        <el-menu :collapse="isCollapse" :default-active="path" class="el-menu-vertical-demo" background-color="#545c64"
            text-color="#fff" active-text-color="#ffd04b" :router="true">
            <el-menu-item index="home">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
            </el-menu-item>


            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-user"></i>
                    <span>人员管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="member">
                        <i class="el-icon-s-custom"></i>
                        <span slot="title">员工管理</span>
                    </el-menu-item>
                    <el-menu-item index="user">
                        <i class="el-icon-user-solid"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-goods"></i>
                    <span>商品管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="goods">
                        <i class="el-icon-s-goods"></i>
                        <span slot="title">商品管理</span>
                    </el-menu-item>
                    <el-menu-item index="order">
                        <i class="el-icon-s-goods"></i>
                        <span slot="title">订单管理</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>


            <el-button class="fanyi" @click="drawer = true">翻</el-button>
            <!-- 右侧弹出抽屉 -->
            <el-drawer :visible.sync="drawer" :with-header="false">
                <div style="margin: 20px;">
                    <el-input type="textarea" autosize placeholder="请输入待翻译内容..." v-model="text" @input="translateBtn"
                        style="font-size: 26px;">
                    </el-input>
                    <el-card shadow="hover" class="box-card" style="margin: 30px 0 0 0;font-size: 20px;"
                        v-if="text != ''" v-loading="loading">
                        <div>以下是翻译内容:</div>
                        <div style="margin-top: 20px;font-size: 26px;">{{ result }}</div>
                    </el-card>
                    <el-card shadow="hover" class="box-card" style="display: flex;padding: 0;margin: 30px 0 0 0;">
                        <div style="display: flex;flex-wrap: wrap;width: 100%;">
                            <div v-for="item in hotSearch" :key="item.title"
                                style="width: 48%;margin-right: 9px;margin-bottom: 30px;position: relative;">
                                <a class="img1" :href="item.url" target="_blank">
                                    <img style="object-fit: contain;" :src="item.cover" :title="item.title">
                                </a>
                                <div
                                    style="color:red;position: absolute;bottom: 10px;right: 10px;font-weight: 700;font-size: 22px;">
                                    <i class="el-icon-s-flag"></i>热度:{{ item.heat }}
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-drawer>
        </el-menu>
    </div>
</template>

<script>
import { getHotSearch, translate } from '@/api/api';
export default {
    data() {
        return {
            path: '',
            isCollapse: false,
            drawer: false,
            text: "",
            result: "",
            hotSearch: "",
            timer: null,
            loading: true,
        }
    },
    mounted() {
        // 获取资讯
        getHotSearch().then((res) => {
            console.log(res.data.data[0].hot);
            this.hotSearch = res.data.data[0].hot
        })
        setTimeout(() => {
            // console.log(this.$router.app._route.path);
            let arr = this.$router.app._route.path
            // console.log(arr.split("").splice(1,).join(""));
            this.path = arr.split("").splice(1,).join("")
        }, 500);
    },
    methods: {
        translateBtn() {
            this.loading = true
            clearTimeout(this.timer)
            // this.loading = false
            if (this.text != '') {
                this.loading = true
                clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    translate(this.text).then((res) => {
                        // console.log(res.data.data[0].result);
                        this.result = res.data.data[0].result
                        this.loading = false
                    })
                }, 1500);
            } else {
                return;
            }
        },
    },
}
</script>

<style scoped>
.el-menu {
    height: 880px;
}

.fanyi {
    position: fixed;
    bottom: 60px;
    left: 160px;
    font-size: 26px;
    padding: 10px;
    background-color: #535252;
    opacity: 0.4;
    color: #ccc;
    border: none;
}

.img1 {
    width: 100%;
}

.el-button:focus,
.el-button:hover {
    color: #ccc;
    background-color: none;
    background-color: #ccc;
    color: #000;
}

/* .el-menu[data-v-7e48b1e8] {
    height: 890px;
} */
</style>